@using MudBlazor.Docs.Services
@inherits LayoutComponentBase

<MudRTLProvider RightToLeft="@_rightToLeft">
    <MudThemeProvider Theme="_currentTheme"/>
    <MudDialogProvider FullWidth="true" MaxWidth="MaxWidth.ExtraSmall" />
    <MudSnackbarProvider />

    <MudSwipeArea OnSwipe="@OnSwipe">
        <MudLayout>
            <MudAppBar Elevation="25">
                <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
                <MudText Typo="Typo.h5" Class="mudblazor-appbar-brand-text d-none d-md-flex">MudBlazor</MudText>
                <MudSpacer />
                <MudAutocomplete AutoFocus="true" @ref="_searchAutocomplete" T="ApiLinkServiceEntry" Placeholder="Search" SearchFunc="Search" Variant="Variant.Outlined" ValueChanged="OnSearchResult" Class="docs-search-bar" AdornmentIcon="@Icons.Material.Filled.Search">
                    <ItemTemplate Context="result">
                        <MudText>@result.Title</MudText> <MudText Typo="Typo.body2">@result.SubTitle</MudText>
                    </ItemTemplate>
                </MudAutocomplete>
                <MudSpacer />
                <div class="d-none d-md-flex align-center">
                    <MudMenu EndIcon="@Icons.Filled.KeyboardArrowDown" Label="Support" Color="Color.Inherit" Dense="true" Direction="Direction.Right" OffsetY="true">
                        <MudText Typo="Typo.body2" Class="px-4 py-2"><b>Community Support</b></MudText>
                        <MudMenuItem Link="https://discord.gg/mudblazor" Target="_blank">Discord</MudMenuItem>
                        <MudMenuItem Link="https://github.com/Garderoben/MudBlazor/discussions" Target="_blank">GitHub Discussions</MudMenuItem>
                        <MudText Typo="Typo.body2" Class="px-4 py-2"><b>Tools and resources</b></MudText>
                        <MudMenuItem Link="https://try.mudblazor.com/snippet" Target="_blank">TryMudBlazor</MudMenuItem>
                        <MudMenuItem Link="https://github.com/Garderoben/MudBlazor.Templates" Target="_blank">Templates</MudMenuItem>
                        <MudText Typo="Typo.body2" Class="px-4 py-2"><b>Sponsor</b></MudText>
                        <MudMenuItem Link="https://opencollective.com/mudblazor" Target="_blank">Open Collective</MudMenuItem>
                    </MudMenu>
                    <MudDivider Vertical="true" FlexItem="true" DividerType="DividerType.Middle" Class="mx-4 my-3" />
                    @if (Wasm)
                    {
                        <MudTooltip Text="Switch to Blazor server-side">
                            <MudIconButton Icon="@Icons.Material.Filled.Computer" Color="Color.Inherit" OnClick="@((e) => SwitchToServer())" />
                        </MudTooltip>
                    }
                    else
                    {
                        <MudTooltip Text="Switch to Blazor wasm">
                            <MudIconButton Icon="@Icons.Material.Filled.Dns" Color="Color.Inherit" OnClick="@((e) => SwitchToWasm())" />
                        </MudTooltip>
                    }
                    <MudTooltip Text="Toggle light/dark theme">
                        <MudIconButton Icon="@Icons.Material.Filled.Brightness4" Color="Color.Inherit" OnClick="@((e) => DarkMode())" />
                    </MudTooltip>
                    <MudTooltip Text="GitHub repository">
                        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/Garderoben/MudBlazor" Target="_blank" />
                    </MudTooltip>
                    <MudTooltip Text="Toggle right-to-left/left-to-right">
                        <MudIconButton Icon="@Icons.Material.Filled.FormatTextdirectionRToL" Color="Color.Inherit" OnClick="@((e) => RightToLeftToggle())" />
                    </MudTooltip>
                </div>
                <MudMenu Icon="@Icons.Filled.Settings" Color="Color.Inherit" Dense="true" Direction="Direction.Right" OffsetY="true" Class="d-md-none">
                    <div class="px-2">
                        @if (Wasm)
                        {
                            <MudIconButton Icon="@Icons.Material.Filled.Computer" Color="Color.Inherit" OnClick="@((e) => SwitchToServer())" />
                        }
                        else
                        {
                            <MudIconButton Icon="@Icons.Material.Filled.Dns" Color="Color.Inherit" OnClick="@((e) => SwitchToWasm())" />
                        }
                        <MudIconButton Icon="@Icons.Material.Filled.Brightness4" Color="Color.Inherit" OnClick="@((e) => DarkMode())" />
                        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/Garderoben/MudBlazor" Target="_blank" />
                        <MudIconButton Icon="@Icons.Material.Filled.FormatTextdirectionRToL" Color="Color.Inherit" OnClick="@((e) => RightToLeftToggle())" />
                    </div>
                    <MudText Typo="Typo.body2" Class="px-4 py-2"><b>Community Support</b></MudText>
                    <MudMenuItem Link="https://discord.gg/mudblazor" Target="_blank">Discord</MudMenuItem>
                    <MudMenuItem Link="https://github.com/Garderoben/MudBlazor/discussions" Target="_blank">GitHub Discussions</MudMenuItem>
                    <MudText Typo="Typo.body2" Class="px-4 py-2"><b>Tools and resources</b></MudText>
                    <MudMenuItem Link="https://try.mudblazor.com/snippet" Target="_blank">TryMudBlazor</MudMenuItem>
                    <MudMenuItem Link="https://github.com/Garderoben/MudBlazor.Templates" Target="_blank">Templates</MudMenuItem>
                    <MudText Typo="Typo.body2" Class="px-4 py-2"><b>Sponsor</b></MudText>
                    <MudMenuItem Link="https://opencollective.com/mudblazor" Target="_blank">Open Collective</MudMenuItem>
                </MudMenu>
            </MudAppBar>

            <MudDrawer @bind-Open=_drawerOpen Elevation="25" Breakpoint="Breakpoint.Lg" Class="mudblazor-appbar-band">
                <MudDrawerHeader Class="mudblazor-brand" LinkToIndex="true">
                    <MudBlazorLogo />
                </MudDrawerHeader>
                <NavMenu @ref="@_navMenuRef" />
            </MudDrawer>
                @Body
            <MudScrollToTop TopOffset="400" Style="z-index:2000;">
                <MudFab Icon="@Icons.Material.Filled.KeyboardArrowUp" Color="Color.Primary" />
            </MudScrollToTop>
        </MudLayout>
    </MudSwipeArea>
</MudRTLProvider>